<script lang="ts" setup>
import ProductInfo from './components/ProductInfo.vue'
import ProductContent from './components/ProductContent.vue'
import ProductSpec from './components/ProductSpec.vue'
import useProduct from '@/hooks/useProduct'
import cloneDeep from 'lodash/cloneDeep'
import { message } from '@/utils'
const { info, getInfo, add, update } = useProduct()
const specRef = ref({} as typeof ProductSpec)
const infoRef = ref({} as typeof ProductInfo)
const contentRef = ref({} as typeof ProductContent)
const props = defineProps<{
  show: boolean
  id?: number | string
  edit: boolean
}>()
const emit = defineEmits(['update:show', 'confirm', 'cancel'])
const title = computed(() => (props.id ? '编辑商品' : '新增商品'))
const submit = done => {
  infoRef.value.validate(({ status, data: infoRefData }) => {
    console.log('🚀 ~ infoRef.value.validate ~ status:', status)
    if (status) {
      /**处理数据源 */
      if (specRef.value.alert) {
        message({
          type: 'error',
          content: '规格变动请点击【刷新价格表】后再操作',
        })
        return
      }
      const infoData = infoRefData
      const spec: any = specRef.value.data
      const content = contentRef.value.data
      const isSingular = specRef.value.isSingular()
      const goodsSkuList = cloneDeep(isSingular ? spec.singularGoodsSkuList : spec.goodsSkuList)
      /**处理单规格商品规格问题 "{'':''}"->'' */
      if (isSingular) goodsSkuList[0].spec = ''
      const query = cloneDeep({
        ...infoData,
        ...spec,
        goodsSpecKeyList: isSingular ? [] : spec.goodsSpecKeyList,
        goodsSkuList,
        detail: content,
        isSpec: 1,
      })
      if (query.categoryId instanceof Array) {
        query.categoryId = query.categoryId.join(',')
      }
      if (!isSingular) {
        query.goodsSkuList.forEach(v => {
          v.spec = v.specName || v.spec
        })
      }
      /**校验规格里是否有字段未填写 */
      for (const item of query.goodsSkuList) {
        for (const key of Object.keys(item)) {
          const val = item[key]
          if ([undefined, null, ''].includes(val) && key != 'spec') {
            message({
              type: 'error',
              content: '规格中有字段为空！',
            })
            done(false)
            return
          }
        }
      }
      Reflect.deleteProperty(query, 'keys')
      console.log('🚀 ~ file: index.vue:40 ~ submit ~ query:', query)
      // done(false)
      // return
      const method = props.id ? update : add
      method(query, status => {
        done(status)
        emit('confirm')
        emit('cancel')
        emit('update:show', false)
      })
    } else {
      active.value = '1'
      done(false)
    }
  })
}
onMounted(() => {
  if (props.id) getInfo(props.id)
})
const active = ref('1')
</script>
<template>
  <CModal :title="title" v-model:visible="props.show" width="1600px" :mask-closable="false" @before-ok="submit" @cancel="emit('update:show', false)">
    <div class="wrapper">
      <a-tabs v-model:active-key="active">
        <a-tab-pane key="1" title="商品信息">
          <ProductInfo ref="infoRef" :info="info" />
          <ProductSpec :info="info" ref="specRef" />
        </a-tab-pane>
        <a-tab-pane key="3" title="商品详情">
          <ProductContent :info="info" ref="contentRef" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </CModal>
</template>
<style lang="less" scoped>
.container {
  padding: 0 20px 20px 20px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  background-color: var(--color-bg-2);
}
.steps {
}
</style>
